<template>
  <el-select v-model="value" filterable multiple placeholder="请选择" @change="saveMember">
    <el-option-group
      v-for="member in members"
      :key="member.ch_name"
      :label="member.ch_name">
      <el-option
        v-for="item in member.options"
        :key="item.id"
        :label="item.name"
        :value="item.name">
      </el-option>
    </el-option-group>
  </el-select>
</template>

<script>
import {getAPItokenRes} from '@/utils/api'
export default {
	props: {
		member_value: Array
	},
  data() {
    return {
      templates: [],
      members: [],
      value: this.member_value
    }
  },
  methods: {
  	getTemplates () {
			const promise = getAPItokenRes(API.sysTemp+'?group_by=group.type',this.token)
			promise.then((res)=>{
				if (res.status == 200) {
					this.templates = res.data['人员']
					this.templates.forEach((temp)=>{
						this.getProjects(temp)
					})
				}
			})
		},
		getProjects (temp) {
      const promise = getAPItokenRes(API.instAPI+'?template='+temp.id,this.token)
      promise.then((res)=>{
        if (res.data.status) {
        	this.members.push({'ch_name':temp.ch_name,'options':res.data.data})
        }
      })
    },
    saveMember () {
      console.log(this.value)
    	this.$emit('saveMember',this.value)
    }
  },
  mounted () {
  	this.token = this.$store.state.user.token
  	this.getTemplates()
  }
}
</script>
<style scoped>
.el-select{
	width: 100%;
}
</style>